<template>
	<view class="content">
		<map class="map" :longitude="longitude" :latitude="latitude" :markers="markers" @markertap="onMarkertap"></map>
	</view>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { getTradeList , type Trade} from '../../api';
import { useLoaction } from '../../hooks/use-location';

 const {longitude,latitude} = useLoaction()	
 

 
 //交易数据，后端接口返回的
 const trades = ref<Trade[]>([])
 
 const markers = computed(()=>{
	 return trades.value.map(item=>({
		 ...item,
		 // id :  item.id + 100,
		 latitude: item.lat,
		 longitude:item.lng,
		 width : 30,
		 height : 30,
		 iconPath : `/static/icon_${item.type}.png`
	 }))
 })
 
 function onMarkertap(event : {detail : { markerId:number };}){
 	 // console.log("onMarkertap",event);
	 const id = event.detail.markerId
	 //跳转到详情页面
	 uni.navigateTo({
	 	url:"/pages/info/info?id=" + id,
		events:{
			
		}
	 })
 }
 
 getTradeList().then(result=>{
	 // console.log('result',result);
	 trades.value = result
 })
</script>
<style>
.map {
	width: 100%;
	height: 100vh;
}
</style>
